<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/swiper.min.css">
    <link rel="stylesheet" href="../../css/style.css">
    <style type="text/css">
        .item_content {
            width: 205px;
            height: 138px;
            /*background-color: pink;*/
            float: left;
            margin-right: 28px;
            cursor: pointer;
        }
        .item_content:last-of-type {
            margin-right: 0;
        }

        .item_img_list {
            height: 109px;
            width: 100%;
            object-fit: cover;
        }
        .item_desc {
            font-size: 16px;
            color: #fff;
            padding: 0 6px;
            overflow: hidden;
            /*文本不换行*/
            white-space: nowrap;
            /*文字超出用省略号*/
            text-overflow:ellipsis;
            margin-top: 7px;
        }
    </style>
</head>
<body style="overflow: hidden;">
    <!-- 轮播图区域 -->
    <div class="swiper-container" id="swiperBox">
        <div class="swiper-wrapper" id="j03BottomBox">

        </div>
    </div>
<!--    <div class="swiper-container">-->
<!--    <div class="item_content " style="margin-right: 30px">-->
<!--        <div class="item_img_list swiper-slide">-->
<!--        </div>-->
<!--        <div class="item_desc"></div>-->
<!--    </div>-->
<!--    <div class="item_content">-->
<!--        <div class="item_img_list">-->
<!--        </div>-->
<!--        <div class="item_desc"></div>-->
<!--    </div>-->
<!--        </div>-->

</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/swiper.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>
<script>
    $(function () {
        $('#j03BottomBox').on('click', '.item_content', function() {
            let idx = $(this).attr('data-index');
            // let idx = $(this).data('index')
            window.parent.parent.postMessage({'data':brr[idx],'type':'openPop'},'*')
        })

        let brr = []
        let param = {}
        getJson('qytt_JCXW.json',param,function(res) {
            if (res.code === 200) {
                brr = res.data
                for (let i = 0; i < res.data.length; i+=2) {
                    let arr = res.data.slice(i, i+2)
                    let str = `<div class="swiper-slide">`;
                    for (let j = 0; j < arr.length; j++) {
                        console.log(i,j);
                        str += `<div class="item_content" data-index="${i+j}">
                                    <div class="item_img_list">
                                    <img class="swiper-slide img_box1" src="../../img/all/b${j+i}.jpg" alt="">
                                    </div>
                                    <div class="item_desc">${arr[j].title}</div>
                                </div>`
                    }
                    str += `</div>`
                    $('#j03BottomBox').append(str)

                }
                new Swiper("#swiperBox", {
                    autoplay: true,//可选选项，自动滑动
                });
            }

            // arr = data.data
            // // console.log(arr)
            // var result = [];
            // for(var i=0;i<arr.length;i+=2){
            //     result.push(arr.slice(i,i+2));
            //     console.log(result)
            // }
            // console.log(result)
            // for (let i = 0;i < result.length; i++) {
            //     $('.item_desc').eq(i).html(result[i].title)
            //     // console.log(result[i])
            //     let brr = result[i]
            //     for (let j = 0; j < brr.length; j++) {
            //         // console.log(brr[j])
            //         $('.item_desc').eq(j).html(brr[j].title)
            //         if (brr[j].attachments) {
            //             let arrTwo = brr[j].attachments.split(',')
            //             $('.item_img_list').eq(j).append(`<img class="swiper-slide img_box1" src="${vars.url + 'api/BASE-SERVER/sys/oss/local/' + arrTwo[j]}" alt="">`)
            //             // console.log(arrTwo)
            //         }
            //
            //         // $('.item_img_list').eq(j).append(`<img class="swiper-slide img_box1" src="${vars.url + '/api/BASE-SERVER/sys/oss/local/' + arrTwo[j]}" alt="">`)
            //     }
            //
            //     // if (arr[i].attachments) {
            //     //     let arrTwo = arr[i].attachments.split(',')
            //     //     for (let j = 0; j < arrTwo.length; j++) {
            //     //         $('.item_img_list').eq(i).append(`<img class="swiper-slide img_box1" src="${vars.url + '/api/BASE-SERVER/sys/oss/local/' + arrTwo[j]}" alt="">`)
            //     //     }
            //     //     let mySwiper = new Swiper ('.swiper-container', {
            //     //         autoplay:true,
            //     //         loop: true, // 循环模式选项
            //     //     })
            //     // }
            // }



        })
    })

</script>
</html>
